React = require('react')
{InteractionManager,Platform,View,Image,Text,ScrollView,TouchableHighlight,StyleSheet,Navigator,ListView,TouchableOpacity,ActivityIndicator} = require('react-native')
Dimensions = require('Dimensions')
{ width, height } = Dimensions.get('window')


moment = require('moment')
TopNotice = require('antd-mobile/lib/notice-bar')
RefreshControl = require('antd-mobile/lib/refresh-control')

# 基本页面仅用于页面中只有一个ListView的情况
# 使用页面必须定义renderHeader方法，在方法中绘制导航条
#使用页面必须定义componentDidMount方法，并在其中调用initFetchData或
# lazyLoad方法
BasePage =
  getInitialState:->
    @ds = new ListView.DataSource rowHasChanged:(r1,r2)->r1 isnt r2
    {
      isFirstLoad:true
    }
  _processTime:(time)->
    debugger
    t = moment(time)
    if t.isValid()
      t.format('DD/HHmm')
    else
      ""
  # 转场动画完成后加载数据
  initFetchData:->
    InteractionManager.runAfterInteractions =>
      @props.fetchRefresh(@props.token) if @props.connected
      @setState isFirstLoad:false

  ##转场动画完成后,根据[过期间隔时间]参数决定是否加载新数据，否则加载历史数据
  lazyLoad:(duration)->
    InteractionManager.runAfterInteractions =>
      if @props.connected
        if @props.lastFetchTime
          lastTime = moment(@props.lastFetchTime)
          currTime = moment(new Date())
          if currTime.subtract(duration).isAfter(lastTime)
            @props.fetchRefresh(@props.token)
        else
          @props.fetchRefresh(@props.token)
      @setState isFirstLoad:false



  # ListView相关回调
  _renderListSeparator:(sectionID,rowID)->
    <View key={rowID} style={{height:1,backgroundColor:'#CCCCCC'}}/>
  _renderListFooter:->
    # if @props.isLoading
    #   <View style={{flexDirection:'row',justifyContent:'center',paddingBottom:20}}>
    #     <ActivityIndicator size='small'></ActivityIndicator>
    #     <Text>正在加载</Text>
    #   </View>
    if @props.completed
      <View style={{flexDirection:'row',justifyContent:'center',paddingTop:20,paddingBottom:30}}>
        <Text>到底了</Text>
      </View>
    else unless @props.refreshing
      <View style={{flexDirection:'row',justifyContent:'center',paddingTop:20,paddingBottom:30}}>
        <ActivityIndicator size='small'></ActivityIndicator>
        <Text style={{marginLeft:5}}>正在加载</Text>
      </View>
    else
      <View/>

  _renderListView:->
    <ListView dataSource={@dataSource} style={{flex:1}}
          enableEmptySections={true}
          renderHeader={@_renderListHeader}
          renderRow={@renderRow}
          renderSeparator={this._renderListSeparator}
          renderFooter={@_renderListFooter}
          pageSize={20}
          scrollEventThrottle={20}
          onEndReached={@_onEndReached}
          onEndReachedThreshold={20}
          refreshControl={
            <RefreshControl refreshing={@props.refreshing} onRefresh={@refreshList}
                distanceToRefresh={60}
                resistance={2.5}
                hammerOptions={{
                  touchAction:'auto'
                  recognizers:
                    pan:
                      threshold:10
                  }}/>
          }>
    </ListView>
  _onEndReached:(event)->
    debugger

    return if @props.isLoading or @props.refreshing or @props.completed
    @props.fetchGet(@props.pageIndex+1) if @props.pageIndex not in [null,undefined]
  refreshList:->
    if @props.connected
      @props.fetchRefresh(@props.token)
  render:->
    debugger
    @dataSource = @ds.cloneWithRows(@props.list)
    <View style={width:width,height:height,flexDirection:'column',backgroundColor:'#ffffff',paddingBottom:10}>
      {@renderHeader()}
      {
        if @props.connected is false
          if @props.list.length>0
            <TopNotice mode="closable" style={{margin:10}}>
              无网络连接，您现在看到的是缓存数据
            </TopNotice>
          else
            <TopNotice mode="closable" style={{margin:10}}>
              当前无网络连接，请稍后重试
            </TopNotice>
      }
      {@renderListColumns?()}
      <View  style={{height:1,width:width,backgroundColor:'#CCCCCC'}}/>
      {
        if @state.isFirstLoad
          <View style={width:width,height:height,backgroundColor:'#ffffff'}/>
        else
          if @renderBody
            @renderBody()
          else
            @_renderListView()
      }
    </View>
module.exports = BasePage
